<template name="my">
	<view>
		<cu-custom :bgColor="'bg-'+$themeColor()">
			<block slot="content">我的</block>
		</cu-custom>
		
		
		<view :class="'bg-'+$bgColor()">
			<view class="cu-list menu sm-border  margin-top" >
				<view class="cu-item arrow" >
					<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
					<view class="content ">
						<view class="text-grey margin-left ">{{userInfo.userName}}</view>
					</view>
				</view>
				<view class="cu-item arrow" >
					<view class="content ">
						<text class="text-grey">姓名</text>
					</view>
					<view class="action">
						<view class="text-grey ">{{userInfo.userName}}</view>
					</view>
				</view>
				<view class="cu-item arrow" >
					<view class="content ">
						<text class="text-grey">性别</text>
					</view>
					<view class="action">
						<view class="text-grey ">{{userInfo.sex=='0'?'男':'女'}}</view>
					</view>
				</view>
				<view class="cu-item arrow" >
					<view class="content ">
						<text class="text-grey">出生年月</text>
					</view>
					<view class="action">
						<view class="text-grey ">{{this.$formatDate(userInfo.createTime)}}</view>
					</view>
				</view>
				<view class="cu-item arrow" >
					<view class="content ">
						<text class="text-grey">手机号码</text>
					</view>
					<view class="action">
						<view class="text-grey ">{{userInfo.phonenumber}}</view>
					</view>
				</view>
				
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-red margin-tb-sm lg" @tap="showModal"  data-target="DialogModal1">退出登录</button>
				</view>
				
				
				<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
					<view class="cu-dialog">
						<view class="cu-bar bg-white justify-end">
							<view class="content">退出登录</view>
							<view class="action" @tap="hideModal">
								<text class="cuIcon-close text-red"></text>
							</view>
						</view>
						<view class="padding-xl">
							是否退出登录?
						</view>
						<view class="cu-bar bg-white justify-end">
							<view class="action">
								<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
								<button class="cu-btn bg-green margin-left" @tap="toLogout">确定</button>
				
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>	
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {
	    mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: mapState(['hasLogin', 'userInfo']),
		data() {
			return {
				modalName:null,
			}
		},
		mounted(){
			// 初始化加载
			console.log("mymounted")
			// console.log(this.userInfo)
			this.getUserInfo();
		},
		methods: {
			...mapMutations(['login','logout']),
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			getUserInfo(){
				
			},
			toLogout(){
				// 退出登录
				this.logout();
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style>

</style>
